<template>
    <div class="headWapper">
        <div class="header">
            <span class="title">新中地-三维智慧城市</span>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.headWapper{
    width: 100vw;
    background: linear-gradient(0deg, rgba(0,15,31,0.1) 0%, #000f1f 99.8%, #000f1f 100%);
    background-blend-mode: normal;
    .header{
        width: 100%;
        height: 100px;
        background: transparent;
        background-image: url(/src/assets/bigscreenAssets/头部标题.png);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        .title{
            text-shadow: -1.8369701E-16px 3px #3258a6;
            color: #ffffff;
            font-family: YouSheBiaoTiHei;
            font-size: 36px;
            font-weight: 400;
            line-height: 66px;
            text-align: center;
            display: inline-block;
            height: 100%;
        }
    }
    .bottomHead{
        margin-top: 8px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        padding: 0 30px;
        .headItem{
            display: flex;
            align-items: center;
            width: 295px;
            height: 92px;
            border: 1px solid #275079;
            background: #123251b9;
            background-blend-mode: normal;
            padding-left: 34px;
            .data{
                display: flex;
                flex-direction: column;
                .mount{
                    color: #ebf4ff;
                    font-family: YouSheBiaoTiHei;
                    font-size: 24px;
                    font-weight: 400;
                    line-height: 31px;
                }
                .dataTitlt{
                    color: #90d7fc;
                    font-family: "uniqueID∞version∞MicrosoftYaHei∞Regular";
                    font-size: 18px;
                    font-weight: 400;
                }
            }
            .icon{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 64px;
                height: 54px;
                position: relative;
                margin-right: 34px;
                >:first-child{
                    position: absolute;
                    top: 0;
                    z-index: 10;
                }
                >:last-child{
                    position: absolute;
                    bottom: 0;
                }
            }
        }
    }
}
</style>
